<template>
	<pager ref="pager" @loadData="loadData" navbar auth bottombar>
		<template v-slot:navbar>
			<view class="navbar flex flex-col align-c justify-c w100">
				<view class="txt1">{{progress}}</view>
				<view class="pbar">
					<view class="value" :style="[{width: `${progress}%`}]"></view>
					<image class="mask flex-shrink" mode="scaleToFill" :src="$assets.img('/static/images/ic020.png')">
					</image>
				</view>
			</view>
		</template>

		<view class="safe-bottom flex flex-col w100">

			<view class="box1 flex flex-col w100">

				<view class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic024.png')">
					</image>
					<view class="txt1 flex-sub">电源适配器</view>
					<view class="status flex-shrink">
						<image class="ico2" mode="widthFix" :src="$assets.img('/static/images/ic025.png')"></image>
					</view>
				</view>

				<view class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic021.png')">
					</image>
					<view class="txt1 flex-sub">电池</view>
					<view class="status flex-shrink">
						<view class="error">异常</view>
					</view>
				</view>

				<view class="item flex flex-row align-c justify-b">
					<image class="ico1 active flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic027.png')">
					</image>
					<view class="txt1 flex-sub">手柄</view>
					<view class="status flex-shrink">
						<image class="ico3" mode="widthFix" :src="$assets.img('/static/images/ic026.png')"></image>
					</view>
				</view>

				<view class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic022.png')">
					</image>
					<view class="txt1 flex-sub">电机</view>
					<view class="status flex-shrink">
						<view class="wait">待检测</view>
					</view>
				</view>

				<view class="item flex flex-row align-c justify-b">
					<image class="ico1 flex-shrink" mode="widthFix" :src="$assets.img('/static/images/ic023.png')">
					</image>
					<view class="txt1 flex-sub">控制器</view>
					<view class="status flex-shrink">
						<view class="wait">待检测</view>
					</view>
				</view>

			</view>
		</view>

		<template v-slot:bottombar>
			<view class="bottombar">
				<view class="bottombar-content">
					<view v-if="isTestting" @click="stopTest" hover-class="click-view"
						class="test-btn flex flex-row align-c justify-c">
						停止检测
					</view>
					<view v-else @click="startTest" hover-class="click-view"
						class="test-btn flex flex-row align-c justify-c">
						开始检测
					</view>
				</view>
			</view>
		</template>
	</pager>
</template>
<script>
	export default {
		data() {
			return {
				isTestting: false,
				progress: 0,
			};
		},
		methods: {
			loadData() {
				const vm = this;
				vm.$refs.pager.finish();
			},
			showXuHang() {
				const vm = this;
				vm.$utils.showToast('当前电量剩余50%，预估可行驶114.50km');
			},
			showZhiBao() {
				const vm = this;
				vm.$utils.showToast('当前设备正常质保中，请放心使用');
			},
			showBattery() {
				const vm = this;
				vm.$utils.showToast('当前电池充放电循环22次，健康度良好');
			},
			updateFirmware() {
				const vm = this;

				vm.$utils.isNetworkConnected().then(res => {
					uni.showLoading({
						title: '固件检测中'
					})
					setTimeout(() => {
						uni.hideLoading()
						vm.$utils.showToast('当前固件已是最新版本，无需升级');
					}, 2000)
				}).catch(error => {
					vm.$utils.showToast(error);
				})
			},
			startTest() {
				const vm = this;
				vm.isTestting = true;

				setTimeout(() => {
					vm.progress = 20;
				}, 1000)

				setTimeout(() => {
					vm.progress = 40;
				}, 2000)

				setTimeout(() => {
					vm.progress = 60;
				}, 3000)

				setTimeout(() => {
					vm.progress = 80;
				}, 4000)

				setTimeout(() => {
					vm.progress = 100;
				}, 5000)
			},
			stopTest() {
				const vm = this;
				vm.isTestting = false;
				vm.progress = 0;
			},
		}
	};
</script>
<style>
	page {
		background-color: #000000;
	}
</style>
<style lang="scss" scoped>
	.navbar {
		background-color: #000000;

		.txt1 {
			margin-top: 50rpx;
			font-size: 120rpx;
			color: #2EABFF;
		}

		.txt1:after {
			content: '%';
			font-size: 30rpx;
		}

		.pbar {
			margin: 30rpx 0;
			background-color: #979797;
			position: relative;
			width: 750rpx;
			height: 179rpx;

			.value {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				transition: all 0.6s;
				background: linear-gradient(270deg, rgba(70, 92, 243, 1) 0%, rgba(24, 183, 218, 1) 100%);
			}

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}

	.bottombar-content {
		padding: 30rpx;

		.test-btn {
			height: 108rpx;
			background: linear-gradient(180deg, #427DF7 0%, #0B51E4 100%);
			border-radius: 54rpx;
			font-size: 40rpx;
			color: #FFFFFF;
		}

	}

	.box1 {
		padding: 0 20rpx;

		.item {
			margin-bottom: 26rpx;
			height: 110rpx;
			background: #191B28;
			box-shadow: 0rpx 12rpx 20rpx 14rpx #000000;
			border-radius: 18rpx;

			.ico1 {
				margin-left: 16rpx;
				width: 84rpx;
				height: 84rpx;
				display: block;
				border-radius: 50%;
			}
			
			.active {
				background: #3F51B5;
			}

			.txt1 {
				margin: 0 30rpx;
				font-size: 28rpx;
				color: #ADB3C5;
			}

			.status {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 140rpx;
				padding: 0 20rpx;

				.ico2 {
					width: 48rpx;
					height: 48rpx;
					display: block;
				}

				.ico3 {
					width: 40rpx;
					height: 40rpx;
					display: block;
					animation: rotate 1.5s linear infinite;
				}

				.error {
					font-size: 24rpx;
					color: #E25C38;
				}

				.wait {
					font-size: 24rpx;
					color: #8E8F91;
				}

				@keyframes rotate {
					from {
						transform: rotate(0deg);
					}

					to {
						transform: rotate(360deg);
					}
				}
			}


		}
	}
</style>